<style type="text/css">
    .boxLine{
        align:center;
        width:100%;
        height:35px;
    }
    .boxSelect{
        height:100%;
        float:left;
    }
    .boxPercentUri{
        width:98.5%;
        height:85%;
    }
    .boxPercentContentType{
        width:78%;
    }
    .boxpercentMethod{
        width:22%;
    }
    .boxPercentResponseStatu{
        width:40%;
    }
    .boxPercentResponseContentType{
        width:60%;
    }
    .httpDataBody{
        margin-top:5px;
    }
    .doneButton{
        width:30%;
        height:34px;
        font-size:1.5em;
    }
</style>

<template>
    <div id="newapi" >
        editing:{{apiName}}
        <div id="request">
            <h2>request</h2>
            <div class="boxLine">
                <input type="text" class="boxSelect boxPercentUri"  name="" id="apiName" value="" v-model="apiName" placeholder="API Name if empty URI will be used"/>
            </div>
            <div class="boxLine">
                <input type="text" class="boxSelect boxPercentUri"  name="" id="uri" value="" v-model="uri" placeholder="URI: e.g. /xxx/xx"/>
            </div>
            <div class="boxLine">
                <v-select
                    class="boxSelect boxPercentContentType"
                    :debounce="250"
                    v-model="selectedRequestContentType"
                    :on-search="getOptionsContentType"
                    :placeholder="placeholderContentType"
                    :options="optionsContentType"
                    >
                </v-select>
                <select class="boxSelect boxpercentMethod" v-model="selectedHttpMethod">
                    <option v-for="(k,v) in optionsHttpMethod" :value="k">{{k}}</option>
                </select>
            </div>

            <div class="httpDataBody">
                <request-text v-model="textRequest">
                </request-text>
            </div>
        </div>

        <h2>response</h2>
        <div id="response">
            <div class="boxLine">
                <v-select
                    class='boxSelect boxPercentResponseContentType'
                    :debounce="250"
                    v-model="selectedResponseContentType"
                    :on-search="getOptionsContentType"
                    :placeholder="placeholderContentType"
                    :options="optionsContentType"
                    >
                </v-select>

                <v-select
                    class='boxSelect boxPercentResponseStatu'
                    :debounce="250"
                    v-model="responseHttpCode"
                    :placeholder="placeholderHttpCode"
                    :options="optionsHttpStatusText"
                    >
                </v-select>
            </div>

            <div class="httpDataBody">
                <request-text v-model="textResponse">
                </request-text>
            </div>
        </div>
        <center>
            <button v-if="create" v-on:click="doneForm" class="doneButton" >create</button>
            <button v-else v-on:click="doneForm" class="doneButton" >update</button>
        </center>
    </div>
</template>

<script>
    Date.Unix = function() { return new Date().getTime()/1000|0}
Date.Human = function(second) {
    var date = new Date(second * 1000)
    return  date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()
}

import vSelect from 'vue-select'
import jsonArea from './components/jsonArea.vue'
import optionsHttpStatusText from './assets/httptext'
import optionsContentType from './assets/contentType'
export default {
    name: 'newapi',
    props:['apiDetail'],
    data () {
        return {
            create:true,
            optionsHttpStatusText,
            textRequest:'{}',
            textResponse:'{}',
            apiName:null,
            uri:null,

            responseHttpCode:null,
            placeholderHttpCode:"http statu 200",

            selectedHttpMethod:"POST",
            optionsHttpMethod:['GET','POST','PUT','DELETE','HEAD','OPTIONS','PATCH'],

            selectedRequestContentType:null,
            selectedResponseContentType:null,
            optionsContentType,
            defaultOptionsContentType:optionsContentType,
            placeholderContentType:"content type json"
        }
    },
    methods:{
        reset(){
            this.create=true
            this.selectedRequestContentType=null
            this.selectedResponseContentType=null
            this.apiName=null
            this.uri=null
            this.responseHttpCode=null
            this.textRequest='{}'
            this.textResponse='{}'
        },
        itemsStill(){
            return {
                apiName:this.apiName,
                uri:this.uri,
                selectedHttpMethod:this.selectedHttpMethod,
                selectedRequestContentType:this.selectedRequestContentType,
                textRequest:this.textRequest,
                selectedResponseContentType:this.selectedResponseContentType,
                responseHttpCode:this.responseHttpCode,
                textResponse:this.textResponse
            }
        },
        getOptionsContentType(search, loading) {
            var a=this.defaultOptionsContentType.indexOf(search)
            if (a<0){
                this.optionsContentType=this.defaultOptionsContentType.slice()
                this.optionsContentType.unshift(search)
            }
        },
        doneForm:function(e){
            if (this.uri==null){
                alert("uri can't be empty")
                return
            }
            if (this.selectedRequestContentType==null){
                this.selectedRequestContentType={value:"application/json",label:"application/json"}
            }
            if (this.selectedResponseContentType==null){
                this.selectedResponseContentType={value:"application/json",label:"application/json"}
            }
            if (this.responseHttpCode==null){
                this.responseHttpCode={value:"200",label:"200 OK"}
            }
            if (this.apiName==null){
                this.apiName=this.uri
            }

            var cur=this.itemsStill()
            if  (this.apiDetail==null){
                this.$store.commit("incId")
                cur.id=this.$store.state.gId
                cur.createtime=Date.Human(Date.Unix())
            }else{
                cur.id=this.apiDetail.id
                cur.createtime=this.apiDetail.createtime
                cur.updateTime=Date.Human(Date.Unix())
            }
            let index="/_apilist/"+cur.id
            cur.index=index
            if  (this.create){
                this.$store.commit('add',cur)
            }else{
                this.$store.commit('update',cur)
            }
            this.$router.push(cur.index)
        }
    },
    watch:{
        apiDetail:function(v,oldValue){
            if  (v==null){
                this.reset()
                return
            }
            this.create=false
            this.apiName=v.apiName
            this.uri=v.uri
            this.textRequest=v.textRequest
            this.selectedHttpMethod=v.selectedHttpMethod
            this.selectedRequestContentType=v.selectedRequestContentType
            this.textResponse=v.textResponse
            this.selectedResponseContentType=v.selectedResponseContentType
            this.responseHttpCode=v.responseHttpCode
        }
    },
    components:{
        'v-select':vSelect,
        'request-text':jsonArea
    }
}
</script>
